window.addEventListener('load',function(){

    // 4.轮播图
        // 轮播图左右按钮效果
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;

    focus.addEventListener('mouseenter',function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;// 清除定时器
    })

    focus.addEventListener('mouseleave',function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';

        timer = setInterval(function() {
            arrow_r.click();
        },2000);
    })

        //轮播图小圆圈效果
        var ul = focus.querySelector('ul');
        var ol = focus.querySelector('.circle');
        var circle = 0; // 小圆圈索引
        var num = 0; // 图片索引
        var flag = true; // 节流阀

        // console.log(ul.children.length);
        for (var i = 0;i<ul.children.length;i++) {
            var li = document.createElement('li');
            li.setAttribute('index',i);
            ol.appendChild(li); 
            li.addEventListener('click',function(){
                for (var i = 0;i<ol.children.length;i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                num = index;
                circle = index;
                animate(ul,-index*focusWidth);
            })
        }
        // 设置默认选中第一个小圆圈
        ol.children[0].className = 'current';
        // 克隆第一张图片到最后一个
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        // 改变选中的小圆圈
        arrow_r.addEventListener('click',function() {
            if (flag) {
                flag = false;
                circle++;
                if (num==ul.children.length-1) {
                ul.style.left = 0;
                num = 0;
                    }
                num++;
                circle = circle==ol.children.length? 0:circle;
                circlChange();
                animate(ul,-num*focusWidth,function() {
                    flag = true;
                });
            }

        })

        arrow_l.addEventListener('click',function() {
            if (flag) {
                flag = false;
                circle--;
            
                if (num == 0) {
                    num = ul.children.length-1;
                    ul.style.left = -num*focusWidth;
                }
                num--;
                circle = circle < 0 ? ol.children.length-1:circle;
                circlChange();
                animate(ul,-num*focusWidth,function() {
                    flag=true;
                });
            }
        })
        function circlChange() {
            for(var i = 0; i<ol.children.length;i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
        }

        // 自动轮播
        var timer = setInterval(function() {
            arrow_r.click();
        },2000);
})